<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>YAP</title>
        <style>
            .ui-widget, .ui-widget{ font-size: 12px;}
            .ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{ border: none;}
            .logintbl{margin-top: 25px; margin-left: 870px;}
        </style>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="90">
                <h:panelGrid columns="3">
                    <p:graphicImage value="/resources/elogo.JPG" /> 
                    <table border="0" class="logintbl">
                        <tr>
                            <td><strong>Logged as:</strong>&nbsp;#{shiroLoginBean.username}|</td>
                            <td><h:form><h:commandLink action="#{logout.submit}" value="logout"/></h:form></td>
                        </tr>
                    </table>
                </h:panelGrid>
            </p:layoutUnit>
            <p:layoutUnit position="west" size="200">
                <p:panel header="Account Status">
                    First time Logging in.
                </p:panel>
            </p:layoutUnit>
            <p:layoutUnit position="center">
                <h:form id="formed">  
                    <p:messages id="mes" showDetail="true" autoUpdate="true" closable="true" ></p:messages>
                    <p:panel header="Provide New Password">  
                        <h:panelGrid columns="2">  
                            <h:outputText value="Password: " />  
                            <p:password id="nonFeedback" value="#{passwordChangeBean.password1}" feedback="true" required="true" requiredMessage="Password entry must not be empty"/>  
                            <h:outputText value="Confirm: " />  
                            <p:password id="feedback" value="#{passwordChangeBean.password2}" feedback="true" required="true" requiredMessage="Password entry must not be empty"/>  
                            <p:commandButton id="button1" action="#{passwordChangeBean.changePassword}" value="Commit"></p:commandButton>
                        </h:panelGrid>  
                        <p:tooltip for="button1" value="Save"/>
                    </p:panel>  
                </h:form>
            </p:layoutUnit>    
        </p:layout>
    </h:body>
</html>

